<template>
  日志记录
  <div class="data-detail">
    <el-table v-loading="loading" :data="logList" style="width: 100%">
      <el-table-column label="学号" align="center" prop="studentNumber" width="180" />
      <el-table-column label="姓名" align="center" prop="studentName" width="80" />
      <el-table-column label="日志类型" align="center" prop="logType" width="90" >
        <template #default="scope">
          {{ getLogTypeLabel(scope.row.logType) }}
        </template>
      </el-table-column>
      <el-table-column label="分数" align="center" prop="score" width="80" />
      <el-table-column label="方向" align="center" prop="direction" width="80">
        <template #default="scope">
          {{ directionMap[scope.row.direction]||"无方向" }}
        </template>
      </el-table-column>
      <el-table-column label="记录时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日志内容" align="center" prop="content" show-overflow-tooltip />
    </el-table>
    
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="handlePagination"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { parseTime } from '@/utils/ruoyi'
import { getDirection } from '@/api/directionmanagement/direction'

// 定义props
const props = defineProps({
  logList: {
    type: Array,
    default: () => []
  },
  total: {
    type: Number,
    default: 0
  },
  queryParams: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// 定义emits
const emit = defineEmits(['pagination'])

// 方向名称映射
const directionMap = ref({})

// 获取方向名称
const getDirectionName = async (id) => {
  if (!id) return '未知方向'
  
  // 如果已经缓存，直接返回
  if (directionMap.value[id]) {
    return directionMap.value[id]
  }
  
  try {
    const response = await getDirection(id)
    const directionName = response.data?.directionName || '未知方向'
    // 缓存方向名称
    directionMap.value[id] = directionName
    return directionName
  } catch (error) {
    console.error('获取方向名称失败:', error)
    return '未知方向'
  }
}

// 日志类型映射
const logTypeMap = {
  0: '课程学习',
  1: '学习时长',
  2: '竞赛情况',
  3: '项目实践',
  4: '科创贡献'
}

// 获取日志类型标签
const getLogTypeLabel = (type) => {
  return logTypeMap[type] || '未知类型'
}

// 处理分页事件
const handlePagination = (newParams) => {
  emit('pagination', newParams)
}

// 监听logList变化，预加载方向名称
watch(
  () => props.logList,
  async (newList) => {
    if (newList && newList.length > 0) {
      // 获取所有唯一的方向ID
      const directionIds = [...new Set(newList.map(item => item.direction).filter(Boolean))]
      
      // 并行请求所有方向名称
      const promises = directionIds.map(id => getDirectionName(id))
      await Promise.all(promises)
    }
  },
  { immediate: true }
)
</script>

<style scoped>
.data-detail {
  width: 100%;
}
</style>